<template>
  <div class="comment-list-wrapper">
    <v-header ref="header" title="评论列表"></v-header>
    <div :style="{height: scrollHeight + 'px'}">
      <scroll
        ref="scroll"
        v-if="commentList.length > 0"
        :data="commentList"
        :pullDownRefresh="true"
        :pullUpLoad="true"
        @pullingDown="onPullingDown"
        @pullingUp="onPullingUp"
        >
        <div class="comment-scroll-wrapper">
          <p @click="toCommentList()" class="comment-count">来自{{commentTotal}}位游客点评</p>
          <ul class="comment-list">
            <li v-for="comment in commentList" :key="comment.id" @click="clickCommentItem(comment.id)" class="comment-item">
              <div class="comment-wrapper">
                <div class="user-info">
                  <img class="head-url" v-lazy="comment.headUrl" @click.stop="toMyInfo(comment.userId)"/>
                  <div class="user-center">
                    <p class="nickname">{{comment.nickname}}</p>
                    <rater v-model="comment.rate" star="<i class='icon iconfont icon-scenic-star'/>" active-color="#ff7e00" :margin="2" :disabled="true" :font-size="12"></rater>
                    <p class="time">{{comment.createAt | personifyTime }}</p>
                  </div>
                </div>
                <p class="comment-content">
                  {{comment.comment}}
                </p>
                <ul class="comment-atlas" v-if="comment.matchImgUrl.length > 0">
                  <li v-for="(img, index) in comment.matchImgUrl" :key="index" v-lazy:backgroundImage="img" v-if="index < 3"></li>
                </ul>
                <p class="reply">
                  <span style="margin-right: 16px">回复</span>
                  <span>查看回复({{comment.replyCount}})</span>
                  <i class="icon iconfont icon-more1" @click.stop="toShowMenus(comment)"></i>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </scroll>
      <not-data v-if="commentList.length > 0" tip="没有评论数据~"  v-cloak></not-data>
    </div>

    <actionsheet v-model="showOptionMenu" @on-click-menu="clickActionSheet" :menus="optionMenus" :show-cancel="true"></actionsheet>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import NotData from '@/components/not-data/not-data'
import { Rater, Actionsheet } from 'vux'

import axios from '@/api/axiosApi'
import { QINIU_PREFIX } from '@/api/config'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { localUser } from '@/assets/js/local'

export default {
  data() {
    return {
      showOptionMenu: false,
      optionMenus: {
        report: '举报'
      },
      pageNum: 1,
      commentTotal: 0,
      commentList: [],
      currentComment: null,
      scrollHeight: 500
    }
  },
  components: {
    VHeader, Scroll, Rater, Actionsheet, NotData
  },
  created() {
    this._getCommentList()
  },
  mounted() {
    this.scrollHeight = window.innerHeight - this.$refs.header.$el.offsetHeight
  },
  methods: {
    _getCommentList() {
      const type = this.$route.params.type
      switch (type) {
        case '0':
        case '1':
          // 景点
          // 酒店
          this._getScenicComment()
          break
        case '2':
          // 特产
          break
      }
    },
    _getScenicComment() {
      axios.get(this, `/v1/productComment/${this.$route.params.productId}`, {
        pageSize: 10,
        pageNum: this.pageNum
      }, (data, total) => {
        if (data.length === 0) {
          if (this.pageNum > 1) {
            this.pageNum--
            if (this.$refs.scroll) {
              this.$refs.scroll.hiddenPullUpLoad()
            }
          } else {
            this.pageNum = 1
            this.commentList = []
            if (this.$refs.scroll) {
              this.$refs.scroll.hiddenPullDown()
            }
          }
          return
        }

        data.forEach(item => {
          if (item.headUrl) {
            if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
              item.headUrl += '-bheader'
            }
          } else {
            item.headUrl = defaultAvatar
          }
          if (item.matchImgUrl) {
            item.matchImgUrl = item.matchImgUrl.split(';')
          }
        })

        this.commentTotal = total
        if (this.pageNum <= 1) {
          this.commentList = data
        } else {
          this.commentList = this.commentList.concat(data)
        }
      })
    },
    onPullingDown() {
      this.pageNum = 1
      this._getCommentList()
    },
    onPullingUp() {
      this.pageNum++
      this._getCommentList()
    },
    clickActionSheet(item) {
      if (item === 'report') {
        this.toReport()
      }
    },
    clickCommentItem(id) {
      this.$router.push({
        path: `/comment/${id}`,
        query: {
          replyType: this.$route.params.type
        }
      })
    },
    toShowMenus(comment) {
      this.showOptionMenu = true
      this.currentComment = comment
    },
    toReport () {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        return
      }
      if (this.currentComment == null) return
      let type = 104
      if (this.$route.params.type === '1') {
        type = 105
      } else if (this.$route.params.type === '2') {
        type = 106
      }
      this.$router.push({
        path: `/commonReport/${type}/${this.currentComment.id}`,
        query: {
          title: this.currentComment.comment
        }
      })
    },
    toMyInfo(userId) {
      this.$router.push(`/user/archives/${userId}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.comment-list-wrapper
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  z-index 100
  background $color-background
.comment-count
  color #333
  line-height 1
  font-size 18px
  font-weight bold
  padding 16px
  background #ffffff
  margin-bottom 16px
.comment-scroll-wrapper
  background $color-background
.comment-list
  padding 0 16px
  background #fff
  .comment-item
    padding 16px 0
    border-bottom 0.5px solid rgba(226, 226, 226, 0.6)
    .user-info
      display flex
      align-items center
      margin-bottom 6px
      line-height 1
      .head-url
        min-width 40px
        height 40px
        margin-right 8px
        border-radius 50%
      .nickname
        font-size 13px
        color #333
      .user-center
        width calc(100% - 48px)
      .time
        color #999999
        font-size 12px
        float right
    .comment-content
      font-size 15px
      color #333
      line-height 1.3
      padding-left 48px
      no-wrap-n(3)
    .comment-atlas
      margin-top 12px
      display flex
      padding-left 48px
      li
        background-size cover
        background-repeat no-repeat
        background-position center
        overflow hidden
        width calc((100% - 16px) / 3)
        height 60px
        margin-right 8px
        border-radius 3px
        &:last-child
          margin-right 0
    .reply
      color #666
      font-size 13px
      padding-left 48px
      margin-top 12px
      i
        color #e2e2e2
        font-size 18px
        float right
        margin-top -5px
    &:last-child
      border-bottom none
</style>
